Performance Timeline: Цялостно ръководство за събиране на метрики

В днешния забързан дигитален свят производителността на уебсайтовете е от първостепенно значение. Потребителите очакват уебсайтовете да се зареждат бързо и да реагират незабавно. Бавният уебсайт може да доведе до разочарование, изоставени сесии и в крайна сметка до загуба на приходи. За щастие, съвременните уеб браузъри предоставят мощни инструменти за измерване и анализиране на производителността на уебсайтовете. Един от най-ценните от тези инструменти е Performance Timeline API.

Това цялостно ръководство ще разгледа подробно Performance Timeline API, като обхване всичко - от основните му концепции до напреднали техники за събиране и анализиране на метрики за производителност. Ще се задълбочим в различните типове записи за производителност, ще демонстрираме как да използвате API ефективно и ще предоставим практически примери, които да ви помогнат да оптимизирате производителността на вашия уебсайт.

Какво е Performance Timeline API?

Performance Timeline API е набор от JavaScript интерфейси, които предоставят достъп до данни, свързани с производителността, събирани от браузъра. Той позволява на разработчиците да измерват различни аспекти на производителността на уебсайта, като например:

• Време за зареждане на страницата
• Време за зареждане на ресурси (изображения, скриптове, стилове)
• Измервания на потребителското време (User timing)
• Кадрова честота (Frame rate) и производителност на рендирането
• Използване на паметта

Чрез събиране и анализиране на тези данни, разработчиците могат да идентифицират тесните места в производителността и да приложат оптимизации за подобряване на потребителското изживяване. API предоставя стандартизиран начин за достъп до данни за производителността, което улеснява изграждането на инструменти за мониторинг на производителността между различните браузъри.

Ключови концепции и интерфейси

Performance Timeline API се върти около няколко ключови концепции и интерфейси:

• Performance Timeline: Представлява времевата линия на събитията, свързани с производителността, които са се случили по време на жизнения цикъл на уеб страницата. Това е централната точка за достъп до данни за производителността.
• Performance Entry: Представлява единично събитие, свързано с производителността, като например събитие за зареждане на ресурс или дефинирано от потребителя измерване на време.
• Performance Observer: Позволява на разработчиците да наблюдават Performance Timeline за нови записи за производителност и да реагират на тях в реално време.
• Обект `performance`: Глобалният обект (`window.performance`), който предоставя достъп до Performance Timeline и свързаните с него методи.

Обектът `performance`

Обектът `performance` е отправната точка за взаимодействие с Performance Timeline API. Той предоставя методи за извличане на записи за производителност, изчистване на времевата линия и създаване на наблюдатели на производителността (performance observers). Някои от най-често използваните методи включват:

• `performance.getEntries()`: Връща масив от всички записи за производителност във времевата линия.
• `performance.getEntriesByName(name, entryType)`: Връща масив от записи за производителност с конкретно име и тип.
• `performance.getEntriesByType(entryType)`: Връща масив от записи за производителност от определен тип.
• `performance.clearMarks(markName)`: Изчиства маркировки за производителност (performance marks) с конкретно име.
• `performance.clearMeasures(measureName)`: Изчиства измервания на производителността (performance measures) с конкретно име.
• `performance.now()`: Връща времеви печат с висока резолюция, обикновено в милисекунди, представляващ времето, изминало от началото на навигацията. Това е от решаващо значение за измерване на продължителността.

Типове записи за производителност (Performance Entry Types)

Performance Timeline API дефинира няколко различни типа записи за производителност, всеки от които представлява специфичен тип събитие. Някои от най-важните типове записи включват:

• `navigation`: Представлява времето за навигация при зареждане на страница, включително DNS търсене, TCP връзка, времена за заявка и отговор.
• `resource`: Представлява зареждането на конкретен ресурс, като изображение, скрипт или стил.
• `mark`: Представлява дефиниран от потребителя времеви печат във времевата линия.
• `measure`: Представлява дефинирана от потребителя продължителност във времевата линия, изчислена между две маркировки.
• `paint`: Представлява времето, необходимо на браузъра да изрисува първото съдържание на екрана (First Paint) и първото значимо съдържание (First Contentful Paint).
• `longtask`: Представлява задачи, които блокират основната нишка за продължителен период от време (обикновено по-дълъг от 50 ms), което потенциално може да причини забавяне на потребителския интерфейс (UI jank).
• `event`: Представлява събитие в браузъра, като кликване с мишката или натискане на клавиш.
• `layout-shift`: Представлява неочаквани промени в оформлението на страницата, които могат да нарушат потребителското изживяване (Cumulative Layout Shift).
• `largest-contentful-paint`: Представлява времето, необходимо на най-големия елемент със съдържание във видимата част на екрана (viewport) да стане видим.

Събиране на метрики за производителност

Има няколко начина за събиране на метрики за производителност с помощта на Performance Timeline API. Най-често срещаните подходи включват:

• Директно извличане на записи от времевата линия: Използване на `performance.getEntries()`, `performance.getEntriesByName()` или `performance.getEntriesByType()` за извличане на конкретни записи за производителност.
• Използване на Performance Observer: Наблюдение на времевата линия за нови записи и реагиране на тях в реално време.

Директно извличане на записи

Най-простият начин за събиране на метрики за производителност е директното извличане на записи от времевата линия. Това е полезно за събиране на данни след настъпване на конкретно събитие, например след зареждане на страницата или след като потребителят е взаимодействал с конкретен елемент.

Ето пример как да извлечете всички записи за ресурси от времевата линия:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Този код извлича всички записи от тип "resource" и записва името и продължителността на всеки ресурс в конзолата.

Използване на Performance Observer

Performance Observer ви позволява да наблюдавате Performance Timeline за нови записи за производителност и да реагирате на тях в реално време. Това е особено полезно за събиране на данни, когато те станат достъпни, без да се налага многократно да проверявате времевата линия.

Ето пример как да използвате Performance Observer за наблюдение на нови записи за ресурси:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Този код създава Performance Observer, който слуша за нови записи от тип "resource". Когато нов запис за ресурс бъде добавен към времевата линия, се изпълнява callback функцията на наблюдателя, която записва името и продължителността на ресурса в конзолата. Методът `observer.observe()` указва кои типове записи трябва да следи наблюдателят.

Измерване на потребителското време (User Timing)

Performance Timeline API също така ви позволява да дефинирате свои собствени метрики за производителност, като използвате типовете записи `mark` и `measure`. Това е полезно за измерване на времето, необходимо за изпълнение на конкретни части от вашето приложение, като например рендиране на компонент или обработка на потребителски вход.

За да измерите потребителското време, първо създавате `mark`, за да маркирате началото и края на секцията, която искате да измерите. След това създавате `measure`, за да изчислите продължителността между двете маркировки.

Ето пример как да измерите времето, необходимо за рендиране на компонент:

            
performance.mark("component-render-start");

// Code to render the component

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Component render time: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Този код създава две маркировки, `component-render-start` и `component-render-end`, преди и след кода, който рендира компонента. След това създава измерване, наречено `component-render-time`, за да изчисли продължителността между двете маркировки. Накрая, той извлича записа за измерване от времевата линия и записва продължителността в конзолата.

Анализиране на метрики за производителност

След като сте събрали метрики за производителност, трябва да ги анализирате, за да идентифицирате тесните места в производителността и да приложите оптимизации. Има няколко инструмента и техники, които можете да използвате за тази цел:

• Инструменти за разработчици в браузъра (Browser Developer Tools): Повечето съвременни уеб браузъри предоставят вградени инструменти за разработчици, които ви позволяват да визуализирате и анализирате данни за производителността. Тези инструменти обикновено включват панел Performance, който показва времева линия на събитията, свързани с производителността, както и инструменти за профилиране на JavaScript код и анализ на използването на паметта.
• Инструменти за мониторинг на производителността: Има много инструменти за мониторинг на производителността от трети страни, които могат да ви помогнат да събирате, анализирате и визуализирате данни за производителността. Тези инструменти често предоставят разширени функции като мониторинг в реално време, откриване на аномалии и автоматизирано отчитане. Примерите включват New Relic, Datadog и Sentry.
• Web Vitals: Инициативата на Google Web Vitals предоставя набор от метрики, които се считат за съществени за измерване на потребителското изживяване. Тези метрики включват Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS). Наблюдението на тези метрики може да ви помогне да идентифицирате и разрешите често срещани проблеми с производителността.

Използване на инструментите за разработчици в браузъра

Инструментите за разработчици в браузъра са мощен и лесно достъпен ресурс за анализ на производителността. Ето как можете да използвате панела Performance в Chrome Developer Tools (други браузъри имат подобни функционалности):

1. Отворете инструментите за разработчици: Щракнете с десния бутон на мишката върху уеб страницата и изберете "Inspect" или натиснете F12.
2. Навигирайте до панела Performance: Кликнете върху раздела "Performance".
3. Започнете запис: Кликнете върху бутона за запис (обикновено кръгче), за да започнете да събирате данни за производителността.
4. Взаимодействайте със страницата: Изпълнете действията, които искате да анализирате, като например зареждане на страницата, кликване върху бутони или скролиране.
5. Спрете записа: Кликнете върху бутона за спиране, за да завършите записа.
6. Анализирайте времевата линия: Панелът Performance ще покаже времева линия на събитията, свързани с производителността, включително времена за зареждане, изпълнение на JavaScript, рендиране и изрисуване.

Времевата линия предоставя подробна информация за всяко събитие, включително неговата продължителност, начален час и връзка с други събития. Можете да увеличавате и намалявате мащаба, да филтрирате събития по тип и да инспектирате отделни събития, за да получите повече информация. Разделите "Bottom-Up," "Call Tree," и "Event Log" предоставят различни гледни точки към данните, което ви позволява да идентифицирате тесните места в производителността и да оптимизирате кода си.

Web Vitals: Измерване на потребителското изживяване

Web Vitals са набор от метрики, дефинирани от Google за измерване на потребителското изживяване на уебсайт. Фокусирането върху тези метрики може значително да подобри удовлетвореността на потребителите и SEO класирането.

• Largest Contentful Paint (LCP): Измерва времето, необходимо на най-големия елемент със съдържание във видимата част на екрана да стане видим. Добрият LCP резултат е 2.5 секунди или по-малко.
• First Input Delay (FID): Измерва времето, необходимо на браузъра да отговори на първото взаимодействие на потребителя (напр. кликване върху бутон или докосване на връзка). Добрият FID резултат е 100 милисекунди или по-малко.
• Cumulative Layout Shift (CLS): Измерва количеството неочаквани промени в оформлението, които се случват на страницата. Добрият CLS резултат е 0.1 или по-малко.

Можете да измервате Web Vitals с помощта на различни инструменти, включително:

• Chrome User Experience Report (CrUX): Предоставя данни за производителността на уебсайтове в реални условия, базирани на анонимизирани потребителски данни от Chrome.
• Lighthouse: Автоматизиран инструмент, който прави одит на производителността, достъпността и SEO на уеб страници.
• Web Vitals Extension: Разширение за Chrome, което показва метриките на Web Vitals в реално време, докато разглеждате уеб.
• PerformanceObserver API: Директно събиране на данни за web vitals от браузъра, докато събитията се случват.

Практически примери и случаи на употреба

Ето някои практически примери и случаи на употреба как можете да използвате Performance Timeline API, за да оптимизирате производителността на вашия уебсайт:

• Идентифициране на бавно зареждащи се ресурси: Използвайте типа запис `resource`, за да идентифицирате изображения, скриптове и стилове, които отнемат много време за зареждане. Оптимизирайте тези ресурси, като ги компресирате, използвате мрежа за доставка на съдържание (CDN) или ги зареждате отложено (lazy-loading). Например, много платформи за електронна търговия като Shopify, Magento или WooCommerce разчитат на изображения, за да продават продукти. Оптимизирането на зареждането на изображения с помощта на данните от performance timeline ще подобри клиентското изживяване, особено за мобилните потребители.
• Измерване на времето за изпълнение на JavaScript: Използвайте типовете записи `mark` и `measure`, за да измерите времето, необходимо за изпълнение на конкретни JavaScript функции. Идентифицирайте бавно изпълняващи се функции и ги оптимизирайте, като използвате по-ефективни алгоритми, кеширате резултати или отлагате изпълнението за по-късен момент.
• Откриване на дълги задачи (Long Tasks): Използвайте типа запис `longtask`, за да идентифицирате задачи, които блокират основната нишка за продължителен период от време. Разделете тези задачи на по-малки части или ги преместете във фонова нишка, за да предотвратите забавяне на потребителския интерфейс.
• Наблюдение на First Contentful Paint (FCP) и Largest Contentful Paint (LCP): Използвайте типовете записи `paint` и `largest-contentful-paint`, за да наблюдавате времето, необходимо за появата на първото съдържание и на най-голямото съдържание на екрана. Оптимизирайте критичния път на рендиране, за да подобрите тези метрики.
• Анализиране на Cumulative Layout Shift (CLS): Използвайте типа запис `layout-shift`, за да идентифицирате елементи, които причиняват неочаквани промени в оформлението. Резервирайте място за тези елементи или използвайте свойството `transform`, за да ги анимирате, без да причинявате промени в оформлението.

Напреднали техники

След като имате солидно разбиране на основите на Performance Timeline API, можете да изследвате някои напреднали техники за по-нататъшно оптимизиране на производителността на вашия уебсайт:

• Мониторинг на реални потребители (RUM - Real User Monitoring): Събирайте данни за производителността от реални потребители, за да получите по-точна представа за производителността на вашия уебсайт. Използвайте RUM инструмент или внедрете собствено RUM решение с помощта на Performance Timeline API. Тези данни след това могат да се използват за определяне на регионални разлики в производителността. Например, уебсайт, хостван в САЩ, може да има по-бавно време за зареждане в Азия поради мрежова латентност.
• Синтетичен мониторинг: Използвайте синтетичен мониторинг, за да симулирате потребителски взаимодействия и да измервате производителността в контролирана среда. Това може да ви помогне да идентифицирате проблеми с производителността, преди те да засегнат реални потребители.
• Автоматизирано тестване на производителността: Интегрирайте тестването на производителността във вашия CI/CD (continuous integration/continuous deployment) процес, за да откривате автоматично регресии в производителността. Инструменти като Lighthouse CI могат да се използват за автоматизиране на този процес.
• Бюджетиране на производителността: Задайте бюджети за производителност за ключови метрики, като време за зареждане на страница, размер на ресурсите и време за изпълнение на JavaScript. Използвайте автоматизирани инструменти, за да наблюдавате тези бюджети и да ви уведомяват, когато те бъдат надвишени.

Съвместимост с различни браузъри

The Performance Timeline API е широко поддържан от съвременните уеб браузъри, включително Chrome, Firefox, Safari и Edge. Въпреки това може да има някои разлики в изпълнението и поведението на API в различните браузъри.

За да осигурите съвместимост между браузърите, е важно да тествате кода си в различни браузъри и да използвате откриване на функции (feature detection), за да осигурите плавно деградиране на функционалността, ако API не се поддържа. Библиотеки като `modernizr` могат да помогнат с откриването на функции.

Добри практики

Ето някои добри практики за използване на Performance Timeline API:

• Използвайте Performance Observers за мониторинг в реално време: Performance Observers предоставят по-ефективен начин за събиране на данни за производителността от многократното проверяване на времевата линия.
• Бъдете внимателни за въздействието върху производителността от събирането на данни: Събирането на твърде много данни може да се отрази негативно на производителността на вашия уебсайт. Събирайте само данните, от които се нуждаете, и избягвайте извършването на скъпи операции в callback функцията на Performance Observer.
• Използвайте смислени имена за маркировки и измервания: Това ще улесни анализа на данните и идентифицирането на тесните места в производителността.
• Тествайте кода си в различни браузъри: Осигурете съвместимост между браузърите, като тествате кода си в различни браузъри и използвате откриване на функции.
• Комбинирайте с други техники за оптимизация: Performance Timeline API помага за измерване и идентифициране на проблеми. Използвайте го в комбинация с установени добри практики за уеб оптимизация (оптимизация на изображения, минимизиране, използване на CDN) за цялостни подобрения на производителността.

Заключение

Performance Timeline API е мощен инструмент за измерване и анализиране на производителността на уебсайтовете. Като разбирате ключовите концепции и интерфейси на API, можете да събирате ценни метрики за производителност и да ги използвате за идентифициране на тесни места в производителността и прилагане на оптимизации. Като се фокусирате върху Web Vitals и прилагате напреднали техники като RUM и автоматизирано тестване на производителността, можете да предоставите по-бързо, по-гладко и по-приятно потребителско изживяване. Възприемането на Performance Timeline API и интегрирането на анализа на производителността във вашия работен процес за разработка ще доведе до значителни подобрения в производителността на вашия уебсайт и удовлетвореността на потребителите в днешната уеб среда, ориентирана към производителността.